<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FSS教务网</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 头部左 -->
        <div class="header_left">
            <div>
                <img class="logo" src="logo.png" height="60px" />
            </div>
        </div>
        <!-- 头部右 -->
        <div class="header_right">
            <!-- 小导航 -->
            <div>
                <table>
                    <tr>
                        <td> <a href="#" class="white"> 设为主页 </a> </td>
                        <td> | </td>
                        <td> <a href="#" class="white"> 加入收藏夹 </a> </td>
                        <td> | </td>
                        <td> <a href="#" class="white"> 处长信箱 </a> </td>
                        <td> | </td>
                        <td> <a href="#" class="white"> 老版教务处网站 </a> </td>
                        <td> | </td>
                        <td> <a href="#" class="white"> ENGLISH </a> </td>
                    </tr>
                </table>
            </div>
            <!-- 搜索框 -->
            <div style="padding-left: 150px;">
                <form>
                    <div>
                        <input type="text" class="search_input">
                        <input class="search_button" type="submit" value>
                    </div>
                </form>
            </div>
        </div>
    </header>
    <!-- 向导栏 -->
    <div>
        <table class="nav" align="center">
            <tr>
                <td> <a href="#"> 网站首页 </a> </td>
                <td> <a href="#"> 教务处概况 </a> </td>
                <td> <a href="#"> 学生服务 </a> </td>
                <td> <a href="#"> 教师服务 </a> </td>
                <td> <a href="#"> 信息服务 </a> </td>
                <td> <a href="#"> 培养方案 </a> </td>
                <td> <a href="#"> 本科教学工程 </a> </td>
                <td> <a href="#"> 教学改革与成果 </a> </td>
                <td> <a href="#"> 规章制度 </a> </td>
                <td> <a href="#"> 教学交流 </a> </td>
                <td> <a href="#"> 下载专区 </a> </td>
            </tr>
        </table>
    </div>
    <!-- 轮播图1 -->
    <div class="play">
        <ul class="list">
            <li class="item">
                <img src="02567868-817a-4741-b40c-4a82ce86e990.png" class="item active" />
            </li>
            <li class="item">
                <img src="02567868-817a-4741-b40c-4a82ce86e990.png" class="item" />
            </li>
            <li class="item">
                <img src="02567868-817a-4741-b40c-4a82ce86e990.png" class="item" />
            </li>
            <li class="item">
                <img src="02567868-817a-4741-b40c-4a82ce86e990.png" class="item" />
            </li>
        </ul>
        <ul class="points">
            <li class="point active" data-index="0"></li>
            <li class="point" data-index="1"></li>
            <li class="point" data-index="2"></li>
            <li class="point" data-index="3"></li>
        </ul>
        <button type="button" class="btn" id="left">&lt;</button>
        <button type="button" class="btn" id="right">&gt;</button>
    </div>
    <!-- 轮播图2、最新动态板块 -->
    <div class="third">
        <!-- 轮播图2 -->
        <span class="one">
            <div class="play1">
                <ul class="list1">
                    <li class="item1">
                        <img src="8807f070-2321-4da6-a1bc-d312f9eecba0.png" class="item active" />
                    </li>
                    <li class="item1">
                        <img src="dd20ba15-39a7-4d85-a1a8-6cb80f9a12ba.jpg" class="item" />
                    </li>
                    <li class="item1">
                        <img src="cea72d3b-568d-4558-9b45-bbe820c8c2a3.jpg" class="item" />
                    </li>
                </ul>
                <ul class="points1">
                    <li class="point1 active" data-index1="0"></li>
                    <li class="point1" data-index1="1"></li>
                    <li class="point1" data-index1="2"></li>
                </ul>
                <button type="button" class="btn" id="left1">&lt;</button>
                <button type="button" class="btn" id="right1">&gt;</button>
            </div>
        </span>

        <!-- 最新动态 -->
        <span class="two">
            <div class="ttitle">
                <img src="111.png" />
                最新动态
                <hr>
                <a href="#" class="more">更多></a>
            </div>
            <ui class="news">
                <li>
                    <div>
                        <a href="#">学校召开暑期本科教学工作会议</a>
                    </div>
                    <div>
                        2021-07-09
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">教务处文科中心开展期末实验室安全专项大检查</a>
                    </div>
                    <div>
                        2021-06-25
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">立德树人育学子,教育扶贫携手行 ——浙江工商大学赴浦江县第三中学开展受助学生座谈</a>
                    </div>
                    <div>
                        2021-06-22
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">浙江省高校通识教育学习共同体项目验收答辩如期举行</a>
                    </div>
                    <div>
                        2021-06-22
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">文科综合实验教学示范中心开展实验室安全教育培训</a>
                    </div>
                    <div>
                        2021-06-17
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">浙江省高校人文社科类专业课程思政建设交流会在浙江工商大学隆重召开</a>
                    </div>
                    <div>
                        2021-05-31
                    </div>
                </li>
            </ui>
        </span>
    </div>
    <!-- 学生专区、教师专区 -->
    <div class="forth">
        <!-- 学生专区 -->
        <span style="padding-right: 50px;">
            <div class="ttitle">
                <img src="111.png" />
                学生专区
                <hr>
                <a href="#" class="more">更多></a>
            </div>
            <table class="tables">
                <tr>
                    <td>
                        <a href="#">2020级少数民族预科学生专业选择结果公示</a>
                    </td>
                    <td>
                        07.07
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于公布转专业名额的通知（2021-2022学年第一学期）</a>
                    </td>
                    <td>
                        07.02
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于组织2021年度第二学士学位招生面试的通知</a>
                    </td>
                    <td>
                        07.02
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于本学期未完成“校园阳光跑” 学生情况的通报</a>
                    </td>
                    <td>
                        07.01
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于2020-2021学年第三学期（暑假短学期）微专业课程...</a>
                    </td>
                    <td>
                        06.30
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于文科中心实验室暑期开放工作的通知</a>
                    </td>
                    <td>
                        06.29
                    </td>
                </tr>
            </table>
        </span>
        <!-- 教师专区 -->
        <span>
            <div class="ttitle">
                <img src="111.png" />
                教师专区
                <hr>
                <a href="#" class="more">更多></a>
            </div>
            <table class="tables">
                <tr>
                    <td>
                        <a href="#">浙江工商大学关于做好2021年普通高校本科专业设置工作...</a>
                    </td>
                    <td>
                        07.08
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于汇编本科生课程简介的通知</a>
                    </td>
                    <td>
                        07.02
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于2020-2021学年第三学期（暑假短学期）微专业课程...</a>
                    </td>
                    <td>
                        06.30
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于核对2021-2022学年第一学期课表（初稿）的通知</a>
                    </td>
                    <td>
                        06.28
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于预订2021-2022学年第一学期课程教材的通知</a>
                    </td>
                    <td>
                        06.25
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">关于2020-2021学年第三学期（暑假短学期）微专业课程...</a>
                    </td>
                    <td>
                        06.22
                    </td>
                </tr>
            </table>
        </span>
    </div>
    <script type="text/javascript">
        var points = document.getElementsByClassName('point');
        var items = document.getElementsByClassName('item');
        var leftbtn = document.getElementById('left');
        var rightbtn = document.getElementById('right');

        var clearactive = function () {
            for (var i = 0; i < 4; i++) {
                items[i].className = 'item';
            }
            for (var i = 0; i < 4; i++) {
                points[i].className = 'point';
            }
        }
        var index = 0;

        var goindex = function () {
            clearactive();
            points[index].className = "point active";
            items[index].className = "item active";
        }

        var left = function () {
            if (index == 0) {
                index = 3
            } else {
                index--;
            }
            goindex();
        }

        var right = function () {
            if (index < 3) {
                index++;
            } else {
                index = 0
            }
            goindex();
        }

        for (var i = 0; i < 4; i++) {
            points[i].addEventListener('click', function () {
                var pointindex = this.getAttribute('data-index');
                index = pointindex;
                goindex();
            })
        }

        rightbtn.addEventListener('click', function () {
            right();
        })

        leftbtn.addEventListener('click', function () {
            left();
        })

        setInterval(function () {
            right();
        }, 2000)


        var points1 = document.getElementsByClassName('point1');
        var items1 = document.getElementsByClassName('item1');
        var leftbtn1 = document.getElementById('left1');
        var rightbtn1 = document.getElementById('right1');

        var clearactive1 = function () {
            for (var i = 0; i < 3; i++) {
                items1[i].className = 'item1';
            }
            for (var i = 0; i < 3; i++) {
                points1[i].className = 'point1';
            }
        }
        var index1 = 0;

        var goindex1 = function () {
            clearactive1();
            points1[index1].className = "point1 active";
            items1[index1].className = "item1 active";
        }

        var left1 = function () {
            if (index1 == 0) {
                index1 = 2
            } else {
                index1--;
            }
            goindex1();
        }

        var right1 = function () {
            if (index1 < 2) {
                index1++;
            } else {
                index1 = 0
            }
            goindex1();
        }

        for (var i = 0; i < 3; i++) {
            points1[i].addEventListener('click', function () {
                var pointindex1 = this.getAttribute('data-index1');
                index1 = pointindex1;
                goindex1();
            })
        }

        rightbtn1.addEventListener('click', function () {
            right1();
        })

        leftbtn1.addEventListener('click', function () {
            left1();
        })

        setInterval(function () {
            right1();
        }, 2000)
    </script>
</body>

</html>